import { PureComponent } from "react";
import { Switch } from "antd-mobile";
import MToast from "../../Util/MToast"
import { isNull, isIOS } from "../../../utils/helper"
interface Props {
	value: any,
	true_value?: any,
	false_value?: any,
	onChange: Function,
	label?: string,
	required?: any,
	show_label?: any,
	tips?: string,
	label_width?: any,
	hasError: boolean,
	label_text_color?: string,
	label_text_align?: any
}
interface State {
	value: any
}
export default class MySwitch extends PureComponent<Props, State>{
	public state: State = {
		value: this.props.value
	}
	componentWillReceiveProps(nextProps: Props) {
		// Should be a controlled component.
		if ('value' in nextProps) {
			let value = nextProps.value;
			let oldValue = this.props.value;
			let { true_value, false_value } = this.props;
			true_value = isNull(true_value) ? 1 : true_value;
			false_value = isNull(false_value) ? 0 : false_value;
			if (value !== oldValue) {
				if (isNull(value)) {
					value = true_value;
					this.changeValue(value)
				}
			}
			this.setState({
				value
			});
		}
	}
	changeValue = (value) => {
		if (!('value' in this.props)) {
			this.setState({
				value: value
			});
		}
		this.triggerChange(value);
	};

	triggerChange = (changedValue) => {
		const onChange = this.props.onChange;
		if (onChange) {
			onChange(changedValue);
		}
	};

	onChange = (value) => {
		let { true_value, false_value } = this.props;
		true_value = isNull(true_value) ? 1 : true_value;
		false_value = isNull(false_value) ? 0 : false_value;
		if (value) {
			value = true_value
		}
		else {
			value = false_value
		}
		this.changeValue(value);
	};

	componentDidMount() {
		let { true_value, false_value, value } = this.props;
		true_value = isNull(true_value) ? 1 : true_value;
		false_value = isNull(false_value) ? 0 : false_value;
		if (isNull(value)) {
			value = true_value
		}
		else {
			if (value === true_value) {
				value = true_value
			}
			else {
				value = false_value
			}
		}
		this.changeValue(value);
	}
	render() {
		let { label, required, show_label, tips, label_width = 5, hasError, true_value, false_value, label_text_color, label_text_align = "left" } = this.props;
		let isShowLabel = isNull(show_label) || show_label == 1;
		let isRequired = required == 1;
		true_value = isNull(true_value) ? 1 : true_value;
		false_value = isNull(false_value) ? 0 : false_value;
		let { value } = this.state;
		if (isNull(value)) {
			value = true
		}
		else {
			if (value === true_value) {
				value = true
			}
			else {
				value = false
			}
		}
		let requiredClass = "am-list-item am-input-item am-list-item-middle";
		if (isRequired) {
			requiredClass += " required"
		}
		if (!isNull(label_text_align)) {
			requiredClass += " label-text-align-" + label_text_align
		}
		if (hasError) {
			requiredClass += " am-input-error"
		}
		let onExtraClick = () => {
			MToast.info(tips, 2, null, false)
		};
		let labelClass = "am-input-label am-input-label-";
		if (isNull(label_width)) {
			labelClass += "3"
		}
		else {
			labelClass += label_width
		}
		return (
			<div>
				<div className={requiredClass} style={{ fontSize: "16px" }} data-flex="box:first">
					{
						isShowLabel ? <div className={labelClass} style={{ color: label_text_color }}>
							{label}
						</div> : <div></div>
					}
					<div style={{ color: "#888" }} className="am-list-line" data-flex="dir:right">
						<span className="am-input-extra" onClick={(e) => {
							e.stopPropagation();
							onExtraClick();
						}}
						>
						</span>
						<Switch platform={isIOS ? "ios" : "android"} color="#108ee9" checked={value} onChange={this.onChange} />
					</div>
				</div>
				{tips && <p className="tipsStyle">{tips}</p>}
			</div>
		)
	}
}
